<script setup lang="ts">
const [enterpriseInfo, setEnterpriseInfo] = useState<any>({} as any)
const { vLoading, withLoading } = useDefineLoading()
const [isEdit, setisEdit] = useState<boolean>(false)

async function getEnterpriseInfo() {
  await withLoading(sleep)(1000)

  setEnterpriseInfo({})
}

async function addOrUpdateData() {
  getEnterpriseInfo()
}
function editData() {
  addOrUpdateData()
  setisEdit(false)
}
// #endregion
</script>

<template>
  <div class="padding-sm flex-direction box-border flex gap-sm container">
    <div class="flex-incompressible">
      <el-button type="primary" @click="setisEdit(true)">
        编辑
      </el-button>
      <el-button plain @click="setisEdit(false)">
        取消
      </el-button>
      <el-button v-show="isEdit" type="primary" @click="editData">
        保存
      </el-button>
    </div>
    <b-scrollbar class="flex-fillRemaining">
      <el-descriptions v-loading :column="2" border class="width-fill">
        <el-descriptions-item label="企业名称">
          <el-input
            v-model="enterpriseInfo.enterpriseName"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="企业联系方式">
          <el-input
            v-model="enterpriseInfo.unitContactNumber"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="法人代码">
          <el-input
            v-model="enterpriseInfo.corporateCode"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="enterpriseInfo.state === 1">
            在业
          </el-tag>
          <el-tag v-else type="warning">
            停业
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="所属地区区域">
          <el-input
            v-model="enterpriseInfo.districtBelongName"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="经纬度">
          {{ enterpriseInfo.latitude }},{{ enterpriseInfo.longitude }}
        </el-descriptions-item>
        <el-descriptions-item label="行业">
          <el-input
            v-if="!isEdit"
            v-model="enterpriseInfo.belongIndustryName"
            disabled
            placeholder=""
          />
          <el-cascader
            v-else
            v-model="enterpriseInfo.belongIndustry"
            clearable
            class="width-fill"
          />
        </el-descriptions-item>
        <el-descriptions-item label="发证日期">
          <el-input
            v-model="enterpriseInfo.registrationDate"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="重点设备数量">
          <el-input
            v-model="enterpriseInfo.numberOfEquipment"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="企业管理人数">
          <el-input
            v-model="enterpriseInfo.numberOfManagers"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="企业主导产品">
          <el-input
            v-model="enterpriseInfo.leadingProduct"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="企业主要生产线名称">
          <el-input
            v-model="enterpriseInfo.mainProductionLine"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="认证机构">
          <el-input
            v-model="enterpriseInfo.certificationBody"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="认证日期">
          <el-input
            v-model="enterpriseInfo.certificationDate"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="能源管理师证号">
          <el-input
            v-model="enterpriseInfo.managerId"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="能管负责人电话">
          <el-input
            v-model="enterpriseInfo.principalPhone"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="能管负责人姓名">
          <el-input
            v-model="enterpriseInfo.principal"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="主管节能领导电话">
          <el-input
            v-model="enterpriseInfo.supervisorPhone"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="主管节能领导">
          <el-input
            v-model="enterpriseInfo.supervisor"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="能源管理机构">
          <el-input
            v-model="enterpriseInfo.managementAgency"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="集团类型">
          <el-input
            v-model="enterpriseInfo.groupType"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="集团地址">
          <el-input
            v-model="enterpriseInfo.groupAddress"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="所属集团">
          <el-input
            v-model="enterpriseInfo.affiliatedGroup"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="注册日期">
          <el-input
            v-model="enterpriseInfo.registrationDate"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="注册资本">
          <el-input
            v-model="enterpriseInfo.registeredCapital"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="传真">
          <el-input
            v-model="enterpriseInfo.fax"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="电子邮箱">
          <el-input
            v-model="enterpriseInfo.email"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="企业网址">
          <el-input
            v-model="enterpriseInfo.enterpriseUrl"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="邮政编码">
          <el-input
            v-model="enterpriseInfo.zipCode"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="单位地址">
          <el-input
            v-model="enterpriseInfo.address"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
        <el-descriptions-item label="法人代表">
          <el-input
            v-model="enterpriseInfo.legalRepresentative"
            :disabled="!isEdit"
            placeholder=""
          />
        </el-descriptions-item>
      </el-descriptions>
    </b-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
.el-input.is-disabled {
  cursor: initial;
  :deep(.el-input__wrapper) {
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    box-shadow: none;
  }
  :deep(.el-input__inner) {
    cursor: initial;
    color: var(--el-text-color-primary);
    -webkit-text-fill-color: var(--el-text-color-primary);
  }
}
</style>
